﻿@page "/sparkline/series-type"

@using Syncfusion.Blazor.Charts

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the various types of series available in sparkline.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see the sparkline with various series types such as <b>Line, Area, Column, Win Loss</b> and <b>Pie</b>. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch-enabled devices.</p>
   <p>More information about sparkline can be found in this <a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/sparkline/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div  class="row">
        <div class="cols-sample-area" align="center" style="margin-top: 8%;">
            <div align="center" class="col-lg-2 col-md-3 col-sm-5 sparent">
                <div class="spark" align="center" style="height: 87px;">
                    <div class="sparktext" align="center" style="position: absolute; margin-top: 90px; width: 90%;">Power production for a day</div>
                    <SfSparkline XName="x" YName="yval" TValue="SparkDataSource" DataSource=@PowerProductionData Type="@SparklineType.Line" Fill="#3C78EF" LineWidth="1" Height="@Height">
                        <SparklineMarkerSettings Visible='@MarkerVisible' Size='2.5' Fill="blue">
                        </SparklineMarkerSettings>
                        <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${x} : ${yval}">
                            <SparklineTrackLineSettings Visible='true'>
                            </SparklineTrackLineSettings>
                        </SparklineTooltipSettings>
                    </SfSparkline>
                </div>
            </div>
             <div align="center" class="col-lg-2 col-md-3 col-sm-5 sparent">
                <div class="spark"  align="center" style="height: 87px;">
                    <div class="sparktext" align="center" style="position: absolute; margin-top: 90px; width: 90%;">Average weather comparision</div>
                    <SfSparkline XName="xval" YName="yval" Height="@Height" TValue="SparkData" DataSource=@WeatherData Type="@SparklineType.Area" Fill="#b2cfff" LineWidth="1" ValueType="SparklineValueType.Category">
                        <SparklineBorder Color="#3C78EF" Width="2"></SparklineBorder>
                        <SparklineTooltipSettings TValue="SparkData" Visible='true' Format="${xval} : ${yval}°C">
                            <SparklineTrackLineSettings Visible='true'>
                            </SparklineTrackLineSettings>
                        </SparklineTooltipSettings>
                    </SfSparkline>
                </div>
            </div>
            <div align="center" class="col-lg-2 col-md-3 col-sm-5 sparent">
                <div class="spark" align="center" style="height: 87px;">
                    <div class="sparktext" align="center" style="position: absolute; margin-top: 90px; width: 90%;">Revenue status</div>
                    <SfSparkline XName="xval" YName="yval" Height="@Height" TValue="SparkData" DataSource=@RevenueStatusData Type="@SparklineType.Column" Fill="#3C78EF" LineWidth="1" ValueType="@SparklineValueType.Category" HighPointColor="#14aa21">
                        <SparklineTooltipSettings TValue="SparkData" Visible='true' Format="${xval} : ${yval}">
                        </SparklineTooltipSettings>
                    </SfSparkline>

                </div>
            </div>
             <div align="center" class="col-lg-2 col-md-3 col-sm-5 sparent">
                <div class="spark"  align="center" style="height: 87px;">
                    <div class="sparktext" align="center" style="position: absolute; margin-top: 90px;  width: 90%;">Customer satisfaction score</div>
                    <SfSparkline  Height="@Height" TValue="int" DataSource="@number" Type="@SparklineType.WinLoss" Fill="#3C78EF" LineWidth="1" ValueType="@SparklineValueType.Numeric" NegativePointColor="#fc5070">
                        <SparklineTooltipSettings TValue="int" Visible='true' >
                        </SparklineTooltipSettings>
                    </SfSparkline>
                </div>
            </div> 
            <div align="center" class="col-lg-2 col-md-5 col-sm-10 sparent">
                <div class="spark" align="center" style="height: 87px;margin-left:-30px">
                    <div class="sparkpie" style="height:40px;width: 29%;">
                        <div align="center" class="pietext" style="position: absolute; margin-top: 46px; margin-left: -2px; width: 29%;">USA</div>
                        <SfSparkline XName="x" YName="y" TValue="SparkDatapie" DataSource=@UsaOlympicsMedals Type="@SparklineType.Pie" LineWidth="1" ValueType="@SparklineValueType.Category">
                            <SparklineTooltipSettings TValue="SparkDatapie" Visible='true' Format="${x} : ${y}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                    <div class="sparkpie" style="height:40px;width: 29%;">
                        <div align="center" class="pietext" style="position: absolute; margin-top: 46px; margin-left: -2px; width: 29%;">GBR</div>
                        <SfSparkline XName="x" YName="y" TValue="SparkDatapie" DataSource=@GbrOlympicsMedals Type="@SparklineType.Pie" LineWidth="1" ValueType="@SparklineValueType.Category">
                            <SparklineTooltipSettings TValue="SparkDatapie" Visible='true' Format="${x} : ${y}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                    <div class="sparkpie"  style="height:40px;width: 29%;">
                        <div align="center" class="pietext" style="position: absolute; margin-top: 46px; margin-left: -2px; width: 29%;">CHN</div>
                        <SfSparkline XName="x" YName="y" TValue="SparkDatapie" DataSource=@ChinaOlympicsMedals Type="@SparklineType.Pie" LineWidth="1" ValueType="@SparklineValueType.Category">
                            <SparklineTooltipSettings TValue="SparkDatapie" Visible='true' Format="${x} : ${y}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                    <div class="sparktext" align="center" style="position: absolute; margin-top: 90px; width: 90%;">Olympics medal details</div>
                </div>
            </div>
        </div>
    </div>
</div>

@code  {
    public String Height { get; set; } = "80px";
    public int[] number = { 12, 15, -10, 13, 16, 6, -12, 17, 14, 0, 8, -10 };
    public class SparkDataSource
    {
        public double x { get; set; }
        public double yval { get; set; }
    }
    public List<SparkDataSource> PowerProductionData = new List<SparkDataSource> {
        new SparkDataSource { x= 1, yval= 5 },
        new SparkDataSource { x= 2, yval= 6 },
        new SparkDataSource { x= 3, yval= 5 },
        new SparkDataSource { x= 4, yval= 7 },
        new SparkDataSource { x= 5, yval= 4 },
        new SparkDataSource { x= 6, yval= 3 },
        new SparkDataSource { x= 7, yval= 9 },
        new SparkDataSource { x= 8, yval= 5 },
        new SparkDataSource { x= 9, yval= 6 },
        new SparkDataSource { x= 10, yval= 5 },
        new SparkDataSource { x= 11, yval= 7 },
        new SparkDataSource { x= 12, yval= 8 },
        new SparkDataSource { x= 13, yval= 4 },
        new SparkDataSource { x= 14, yval= 5 },
        new SparkDataSource { x= 15, yval= 3 },
        new SparkDataSource { x= 16, yval= 4 },
        new SparkDataSource { x= 17, yval= 11 },
        new SparkDataSource { x= 18, yval= 10 },
        new SparkDataSource { x= 19, yval= 2 },
        new SparkDataSource { x= 20, yval= 12 },
        new SparkDataSource { x= 21, yval= 4 },
        new SparkDataSource { x= 22, yval= 7 },
        new SparkDataSource { x= 23, yval= 6 },
        new SparkDataSource { x= 24, yval= 8 }
    };

    public class SparkData
    {
        public double x { get; set; }
        public string xval { get; set; }
        public double yval { get; set; }
    };
    public List<SparkData> WeatherData = new List<SparkData> {
        new SparkData { x= 1, xval= "Jan", yval= 34 },
        new SparkData { x= 2, xval= "Feb", yval= 36 },
        new SparkData { x= 3, xval= "Mar", yval= 32 },
        new SparkData { x= 4, xval= "Apr", yval= 35 },
        new SparkData { x= 5, xval= "May", yval= 40 },
        new SparkData { x= 6, xval= "Jun", yval= 38 },
        new SparkData { x= 7, xval= "Jul", yval= 33 },
        new SparkData { x= 8, xval= "Aug", yval= 37 },
        new SparkData { x= 9, xval="Sep", yval= 34 },
        new SparkData { x= 10, xval= "Oct", yval= 31 },
        new SparkData { x= 11, xval= "Nov", yval= 30 },
        new SparkData { x= 12, xval= "Dec", yval= 29 }
    };


    public List<SparkData> RevenueStatusData = new List<SparkData> {
        new SparkData { x= 1, xval= "Jan", yval= 10 },
        new SparkData { x= 2, xval= "Feb", yval= 6 },
        new SparkData { x= 3, xval= "Mar", yval= 8 },
        new SparkData { x= 4, xval= "Apr", yval= -5 },
        new SparkData { x= 5, xval= "May", yval= 11 },
        new SparkData { x= 6, xval= "Jun", yval= 5 },
        new SparkData { x= 7, xval= "Jul", yval= -2 },
        new SparkData { x= 8, xval= "Aug", yval= 7 },
        new SparkData { x= 9, xval= "Sep", yval= -3 },
        new SparkData { x= 10, xval= "Oct", yval= 6 },
        new SparkData { x= 11, xval= "Nov", yval= 8 },
        new SparkData { x= 12, xval= "Dec", yval= 10 }
    };

    public class SparkDatapie
    {
        public string x { get; set; }
        public double y { get; set; }
    };

    public List<SparkDatapie> UsaOlympicsMedals = new List<SparkDatapie> {
        new SparkDatapie { x= "Gold", y = 46},
        new SparkDatapie { x= "Silver", y = 37},
        new SparkDatapie { x= "Bronze", y = 38}
    };


    public List<SparkDatapie> GbrOlympicsMedals = new List<SparkDatapie> {
        new SparkDatapie { x= "Gold", y = 27},
        new SparkDatapie { x= "Silver", y = 23},
        new SparkDatapie { x= "Bronze", y = 17}
    };


    public List<SparkDatapie> ChinaOlympicsMedals = new List<SparkDatapie> {
        new SparkDatapie { x= "Gold", y = 26},
        new SparkDatapie { x= "Silver", y = 18},
        new SparkDatapie { x= "Bronze", y = 26}
    };

    public List<VisibleType> MarkerVisible = new List<VisibleType> { VisibleType.All };
}

<style>
    td {
        font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
        font-weight: 600;
    }

    .spark {
        border: 1px solid rgb(209, 209, 209);
        border-radius: 2px;
        width: 100%;
    }

    .sparent {
        height: 110px;
        margin-left: 3%;
        margin-right: 0%;
    }

    .sparkpie {
        float: left;
        margin-top: 15px;
        margin-left: 2%;
    }

    .pieparent {
        width: 93%;
    }

    .pietext {
        float: left;
        margin-left: 25%;
    }

    .sparktext {
        text-anchor: middle;
        width: 100%;
    }
</style>